<template>
	<view class="box">
		<view class="bg" :style="{background:'url('+ $BASE_URL +picList[0]  +')',backgroundSize:'100%'}">


			<view class="item-counp-box" v-for="(item,index) in list" :key="index">
				<view class="item-counp"
					:style="{background:'url('+ $BASE_URL + pic[8]+')',backgroundSize:'100% 100%'}">
					<view class="item-counp-l">
						<view class="counp-type">
							{{item.name}}
						</view>
						<view class="" style="color: white;">
							<text style="font-size: 72rpx;">5</text><text style="font-size: 36rpx;">折</text>
						</view>
					</view>
					<view class="item-counp-r">
						<view class="item-counp-r1">
							iphone 14 系列首月5折
						</view>

						<view class="item-counp-r2">
							<view class="">
								有效期至：{{returnTime(item.usetimeend)}}
							</view>
							<view class="l-btn" @click="getcounp(item.id)" v-if="item.status_code =='can_get'">
								立即领取
							</view>
							<view class="use-btn" v-if="item.status_code =='cannot_get'">
								已领取
							</view>
							<view class="use-btn" v-if="item.status_code =='can_use'">
								可使用
							</view>
							<view class="use-btn" v-if="item.status_code =='cannot_use'">
								暂不可用
							</view>
						</view>
						<view class="item-counp-r3" @click="checkRules(index)">
							<view class="">
								使用规则
							</view>
							<image :src=" $BASE_URL + pic[9]" mode="aspectFill"></image>
						</view>
					</view>
				</view>

				<view class="rules" :class="{close:!item.rule_text,open:item.rule_text}">
					<view class="rules-item">
						1、本券不可兑换现金，不可找零。
					</view>
					<view class="rules-item">
						2、如果消费并使用优惠券后，订单发生退款，优惠券无法退还。
					</view>
					<view class="rules-item">
						3、本券仅限指定产品使用。
					</view>
					<view class="rules-item">
						4、若优惠券未使用作废，不接受补领、减租金等其他形式优惠。
					</view>


				</view>
			</view>



		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				picList: [],
				pic: [],
				list: []
			}
		},
		mounted() {


			this.$http('common.getPic', {

			}).then(res => {
				if (res.code === 1) {
					this.picList = res.data.result.counpsCenter
					this.pic = res.data.result.goodsInfoIcon
				}
			});
			this.getCounpList()
		},
		methods: {


			returnTime(val) {

				let date = new Date(val * 1000)
				let Y = date.getFullYear();
				let M = date.getMonth() + 1;
				let D = date.getDate();

				if (M < 10) {
					M = '0' + M;
				}
				if (D < 10) {
					D = '0' + D;
				}
				return Y + '年' + M + '月' + D + '日';
			},
			// counpsCenter

			getCounpList() {
				this.$http('coupons.list', {
					type: 0
				}).then(res => {
					// console.log(res);
					if (res.code == 1) {
						this.list = res.data
					}
				})
			},
			checkRules(i) {
				this.list[i].rule_text = !this.list[i].rule_text
				console.log(this.list);

			},
			getcounp(ids) {
				var that = this
				that.$http(
					'coupons.get', {
						id: ids
					},
					'领取中...'
				).then(res => {
					if (res.code === 1) {
						that.$u.toast('领取成功');
						this.getCounpList()
					}
				});
			}

		}
	}
</script>

<style scoped lang="scss">
	.box {
		min-height: 100vh;

		background-color: #fcf6ec;

		.bg {
			min-height: 100vh;
			background-size: cover !important;
			background-repeat: no-repeat;
			padding-top: 700rpx;

			.item-counp-box {

				margin: 0 auto;
				width: 700rpx;
				// height: 196rpx;
				min-height: 196rpx;
				margin-bottom: 34rpx;
				position: relative;

				.rules {
					width: 100%;
					background-color: #fff;
					padding-left: 22rpx;
					padding-bottom: 14rpx;
					padding-top: 0;
					transition: all 0.5s;
					border-radius: 12rpx;

					.rules-item {
						font-size: 22rpx;
						color: #999999;
						margin-bottom: 10rpx;
					}
				}

				.close {
					padding-top: 0;
				}

				.open {
					box-shadow: 0px 4px 16rpx 0px rgba(74, 21, 12, 0.08);
					padding-top: 206rpx;
				}

				.item-counp {
					position: absolute;
					width: 700rpx;
					height: 196rpx;
					opacity: 1;
					box-shadow: 0px 4px 16rpx 0px rgba(74, 21, 12, 0.15);
					display: flex;
					border-radius: 12rpx;
					overflow: hidden;

					.item-counp-l {
						width: 204rpx;
						height: 196rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						position: relative;

						.counp-type {
							position: absolute;
							left: 14rpx;
							top: 10rpx;
							font-size: 24rpx;
							color: #fff;
						}
					}

					.item-counp-r {
						width: 496rpx;
						height: 196rpx;
						box-sizing: border-box;
						padding: 22rpx 22rpx 0rpx 22rpx;


						.item-counp-r1 {
							color: #333;
							font-size: 28rpx;
							margin-bottom: 16rpx;
						}

						.item-counp-r2 {
							font-size: 22rpx;
							color: #999;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.l-btn {
								width: 150rpx;
								height: 56rpx;
								line-height: 56rpx;
								text-align: center;
								font-size: 24rpx;
								font-weight: 500;
								color: #fff;
								border-radius: 42rpx;
								background: linear-gradient(110deg, #FF8166 -7%, #FA4528 97%);

							}

							.use-btn {
								width: 150rpx;
								height: 56rpx;
								line-height: 56rpx;
								text-align: center;
								font-size: 24rpx;
								font-weight: 500;
								color: #FB5049;
								border: 1rpx solid #FB5049;
								border-radius: 42rpx;
								background: #fff;
							}

							margin-bottom: 6rpx;
						}

						.item-counp-r3 {
							font-size: 24rpx;
							color: #999;
							display: flex;
							align-items: center;
							height: 60rpx;
							line-height: 60rpx;

							image {
								width: 24rpx;
								height: 24rpx;
								margin-left: 20rpx;
							}
						}
					}

				}
			}


		}
	}
</style>
